﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="ReportAnnualKPIPage.aspx.cs" Inherits="FBKPI.Pages.ReportAnnualKPIPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript">

     function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        }

    $(document).ready(function () {
        mainmenu("#nav ul", "#nav li");
        mainmenu("#menu_wrap ul", "#menu_wrap li");

        $("#btn_show").hide();

        $('.date-picker').datepicker({
            changeMonth: false,
            changeYear: true,
            showYear: true,
            showButtonPanel: true,
            dateFormat: 'yy',
            onClose: function (dateText, inst) {
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, 1, 1));
                $("#MainContent_txt_year").val($(this).val());
            }
        });

        $("#report").hide();

        $("#btn_excel").click( function () {
       
          $('#loading').html('<img  src="../../images/process_load.gif">Loading. Please wait...');

            if ($("#MainContent_txt_year").val() != '') {
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": "../ReportHandler/AnnualReportHandler.ashx?User=" + $("#txt_user").val() + "&Year=" + $("#MainContent_txt_year").val(),
                    "success": function (data) {
                  
                        if (data.msg.indexOf('Error') >= 0) {

                            $('#loading').hide();
                            alert(data.msg);
                        }
                        else {
                           
                           $('#loading').hide();
                            document.location = data.msg;
                        }
                        return false;
                    },
                    "error": function (data) {
                    $('#loading').hide();
                        alert(data.msg);
                        return false;
                    }
                });
                return false;            
            }
            else alert('Please enter year');
            return false;
        });

        $("#btn_show").click(function () {
            if ($("#MainContent_txt_year").val() != '') {
                $("#report").show();
                $("#report").dataTable({
                    "oLanguage": {
                        "sZeroRecords": "No records to display",
                    },
                    "bFilter": false,
                    "bInfo": false,
                    "bSort": false,
                    "bPaginate": false,
                    "bAutoWidth": false,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bDestroy": true,
                    "bJQueryUI": true,
                    "bDeferRender": true,
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "GET",
                            "url": "../Serializer/ReportAnnualKPISerializer.ashx?User=" + $("#txt_user").val() + "&Year=" + $("#MainContent_txt_year").val(),
                            "data": aoData,
                            "success": fnCallback,
                            "error": function(data){alert('Error on displaying annual report, please contact IT support'); return false;}
                        });
                    },
                    "aoColumns": [{
                        "mData": "Month"
                    }, {
                        "mData": "Description"
                    }, {
                        "mData": "UoMMax"
                    }, {
                        "mData": "UoMMin"
                    }, {
                        "mData": "Realization"
                    }, {
                        "mData": "Score"
                    }, {
                        "mData": "StatusUser"
                    }, {
                        "mData": "StatusVerificator"
                    }],
                    "aoColumnDefs": [{
                        "sClass": "center",
                        "aTargets": [2, 3, 4, 5, 6, 7]
                    }]
                }).rowGrouping({
                    iGroupingColumnIndex: 0,
                    bExpandableGrouping: true,
                    bHideGroupingColumn: true,
                    asExpandedGroups: ["January"]
                });
                return false;
            } else {
                alert('Please enter year');
                return false;
            }
            return false;
        });
    });
    </script>
    <style>
        .fg-toolbar
        {
            display: none;
        }
        .ui-datepicker-calendar
        {
            display: none;
        }
        .ui-datepicker-month
        {
            display: none;
        }
        .ui-datepicker-prev
        {
            display: none;
        }
        .ui-datepicker-next
        {
            display: none;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div style="height: 525px; overflow: auto;">
        <div class="customPageHeader">
            <span class="customPageTitle">Annual Report</span>
        </div>
        <div style="margin-left: 5px">
            Select Year :
            <asp:TextBox ID="txt_year" ReadOnly="true" runat="server" class="date-picker"></asp:TextBox>&nbsp;
            <button id="btn_show">
                Show</button>&nbsp;
            <button id="btn_excel">
                Excel</button>
        </div>
        <br />
        <div class="ui-widget-content">
        </div>
        <div id="loading" style="width: 200px; height: 200px;">
        </div>
        <%--  <div class="ui-widget-content">
            
            <table cellpadding="0" cellspacing="0" class="display" id="report">
                <thead>
                    <tr>
                        <th>
                            Month
                        </th>
                        <th>
                            KPI Description
                        </th>
                        <th>
                            Max
                        </th>
                        <th>
                            Min
                        </th>
                        <th>
                            Realization
                        </th>
                        <th>
                            Score
                        </th>
                        <th>
                            Status By User
                        </th>
                        <th>
                            Status By Verificator
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>--%>
    </div>
</asp:Content>
